<template>
  <div >
    <el-form  label-position="right"  ref="queryForm" :inline="true" :model="query" label-width="80px" class="demo-form-inline">
      <el-form-item label="真实姓名">
        <el-input v-model="query.realName" placeholder="真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="query.account" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="query.phone" placeholder="电话"></el-input>
      </el-form-item>
    </el-form>

    <!--<el-select v-model="type" class="filter-item" placeholder="请选择">
      <el-option label="全部" value="0" ></el-option>
      <el-option v-for="item in map" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-date-picker class="filter-item"
      v-model="query.startDate"
      type="date"
      placeholder=""
      value-format="yyyy-MM-dd">
    </el-date-picker>

    <el-date-picker class="filter-item"
      v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      range-separator="至"
      start-placeholder="录入开始日期"
      end-placeholder="录入结束日期">
    </el-date-picker>-->
    <div >
      <el-button  @click="emitGetRecords" type="primary" class="filter-item">查询</el-button>
      <el-button  @click="emitGetRecords" type="danger" class="filter-item">刷新</el-button>
      <slot></slot>
      <el-button  :disabled="selectId.length<=0" @click="handleDelete" type="primary" class="filter-item">删除</el-button>
      <el-button  v-if="isShowExport" @click="download" type="primary" class="filter-item">导出</el-button>
      <el-upload  style="margin-left: 10px" v-if="isShowUpload" class="filter-item"
                  :action="host+this.$myUrl.common.importFile"
                  :data="{module:'user'}"
                  :headers="{token}"
                  accept=".xls,.xlsx"
                  :on-success="uploadSuccess"
                  :on-error="uploadError"
                  :on-progress="uploadProcess"
                  :show-file-list="false">
        <el-button type="primary" >导入</el-button>
      </el-upload>
      <el-button  style="margin-left: 10px" v-if="isShowUpload" @click="downloadTemplate" type="primary" class="filter-item">下载模板</el-button>
    </div>
  </div>
</template>

<script>

import {exportXls} from "@/utils";
import {getToken} from "@/utils/auth";

export default {
  name: "QueryUser",
  props:{
    selectId: {type:Array,default:[]},
    isShowExport: {type:Boolean,default:false},
    isShowUpload: {type:Boolean,default:false},
  },
  data() {
    return {
      query: {
        account: '',
        realName: '',
        phone: '',
      },
      token: "",
      host: process.env.VUE_APP_BASE_API,
    }
  },
  methods: {

    download() {
      const url = this.host+ this.$myUrl.common.download + "?module=user"
      exportXls(url);
    },
    downloadTemplate(){
      const url = this.host+ this.$myUrl.common.download + "?module=userTemplate"
      exportXls(url);
    },
    uploadSuccess(res, file, fileList) {
      if (res.status) {
        this.$message.success(res.msg)
        this.reload()
      } else {
        this.$message.error(res.msg)
      }
    },
    uploadError(err, file, fileList) {
      console.log(err)
    },
    uploadProcess(event, file, fileList) {
      console.log(event)
    },

    emitGetRecords() {
      this.$emit('queryRecords', this.query)
    },
    reload() {
      this.$refs['queryForm'].resetFields();
      this.$emit('reloadRecords')
    },
    handleDelete() {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.selectId
        this.$myHttpGet(this.$myUrl.user.del, {id}).then(res => {
          this.$message.success(res.msg)
          this.emitGetRecords()
        })
      });
    },
  },
  mounted() {
    this.token = getToken()
  }
}
</script>

<style scoped>

</style>
